import React, { useState, useEffect } from 'react'
import "./Pay.css"
import { Down } from '@react-vant/icons'
import { Space } from 'react-vant'
import { useNavigate } from "react-router-dom"
import { WechatOutlined, QqOutlined, AlipayCircleOutlined, PayCircleOutlined } from '@ant-design/icons';
import axios from "../../utils/index"
import { Button, Toast } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'

export default function Pay() {
    const user = JSON.parse(localStorage.getItem('user'))
    const datas = JSON.parse(localStorage.getItem('data'))
    const [data, setData] = useState([])
    const [values, setValues] = useState(Number(user.wallet).toFixed(2));
    const price = localStorage.getItem('price')
    const navigate = useNavigate()
    const change = (text) => {
        setValues(text)
    }

    const getOnes = async () => {
        let list = await axios.get(`/getOne?id=${user._id}`)
        if (list.code === 200) {
            setData(list.list)
            localStorage.setItem('user', JSON.stringify(list.list))
        }
    }

    const clickPay = async () => {
        if (values == Number(user.wallet.toFixed(2))) {
            let list = await axios.put(`/pay`, { id: user._id, price: price })
            if (list.code === 200) {
                //添加支付流水明细
                let lists = await axios.post(`/water`, { item: { name: datas.capitals.name, time: new Date(), price: price, text: "打车", uid: user._id } })
                if (lists.code === 200) {
                    //添加已完成
                    let list = await axios.put(`/udpserver`, { id: datas.capitals.id })
                    if (list.code === 200) {
                        localStorage.removeItem("data")
                        Toast.show({
                            content: "支付成功",
                            position: 'top',
                        })


                        setTimeout(() => {
                            navigate('/all/home')
                        }, 1000);
                    }
                }
            } else {
                Toast.show({
                    content: "余额不足",
                    position: 'top',
                });
            }
        } else {
            //添加已完成
            let list = await axios.put(`/udpserver`, { id: datas.capitals.id })
            if (list.code === 200) {
                localStorage.removeItem("data")
                Toast.show({
                    content: "支付成功",
                    position: 'top',
                })


                setTimeout(() => {
                    navigate('/all/home')
                }, 1000);
            }
        }
    }

    useEffect(() => {
        getOnes()
    }, [])

    return (
        <div>
            <div className="topm">
                <div className="returnm">
                    <span className="iconm">
                        <Space gap={20}>
                            <Down className="leftIconm" />
                        </Space>
                    </span>
                    <span className="top-cartm">支付方式</span>
                </div>
            </div>
            <div className="pay-text">
                选择您要使用的付款方式
            </div>

            <div className='pay-center'>
                <div className="pay-logo">
                    <Space gap={20}>
                        <PayCircleOutlined style={{ fontSize: "35px" }} />
                    </Space>
                </div>
                <div className="pay-texts">钱包支付</div>
                <div className="pay-price">¥ {Number(data.wallet).toFixed(2)}</div>
                <div className="pay-radio">
                    <input type="radio" value={values} onChange={() => { change(Number(user.wallet).toFixed(2)) }} checked={values == Number(user.wallet).toFixed(2) ? true : false} className="radios" name="a" />
                </div>
            </div>
            <div className='pay-center'>
                <div className="pay-logo">
                    <Space gap={20}>
                        <WechatOutlined style={{ fontSize: "35px" }} />
                    </Space>
                </div>
                <div className="pay-texts">微信支付</div>
                <div className="pay-price"></div>
                <div className="pay-radio">
                    <input type="radio" value={values} onChange={() => { change('微信支付') }} checked={values === "微信支付" ? true : false} className="radios" name="a" />
                </div>
            </div>
            <div className='pay-center'>
                <div className="pay-logo">
                    <Space gap={20}>
                        <AlipayCircleOutlined style={{ fontSize: "35px" }} />
                    </Space>
                </div>
                <div className="pay-texts">支付宝</div>
                <div className="pay-price"></div>
                <div className="pay-radio">
                    <input type="radio" value={values} onChange={() => { change('支付宝') }} checked={values === "支付宝" ? true : false} className="radios" name="a" />
                </div>
            </div>
            <div className='pay-center'>
                <div className="pay-logo">
                    <Space gap={20}>
                        <QqOutlined style={{ fontSize: "35px" }} />
                    </Space>
                </div>
                <div className="pay-texts">QQ支付</div>
                <div className="pay-price"></div>
                <div className="pay-radio">
                    <input type="radio" value={values} onChange={() => { change('QQ支付') }} checked={values === "QQ支付" ? true : false} className="radios" name="a" />
                </div>
            </div>

            <Button block color='primary' size='large' loading='auto' loadingText='正在加载' onClick={async () => {
                await sleep(2000)
                clickPay()
            }}>
                确认支付
            </Button>

        </div>
    )
}
